<template>
	<view class="bgcolor">
		<header-top :messageInfo="{typeFlag:true,message:'修改银行卡信息'}">
		</header-top>
		<view class="backForm">
			<view class="container">
				<label class="labmar"> 户名</label>
				<input placeholder="请输入户名" clearable style="background-color: #fff;height: 80rpx;border-radius: 20rpx;"
					placeholder-style="paddingLeft:18rpx"></input>
			</view>
			<view class="container">
				<label class="labmar"> 账户类型</label>
				<!-- <u--input placeholder="请选择账户类型" border="surround" clearable></u--input> -->
				<view class="userType" @click="showType=!showType">
					{{typeTxt}}
					<image src="@/static/imags/mypage/xl.png" mode="widthFix"
						style="width: 10%;position: absolute;right: 20rpx;top: 50%;"></image>
				</view>
				<u-picker :show="showType" :columns="typeSelect" @confirm='typeConfirm' @cancel='typeCancel'></u-picker>
			</view>
			<view class="container">
				<label class="labmar">持卡人银行卡证照片</label>
				<view class="pros">
					<view class="backCard flexcenter flexcolumn" @click="upload" v-if="!pzimage">
						<image src="@/static/imags/mypage/cardphoto.png" mode="" style="width: 30%;height: 50%;">
						</image>
						<view class="onFont">
							请上传银行卡正面
						</view>
					</view>
					<view class="" v-else style="position: relative;">
						<image :src="pzimage" mode="" style="width: 660rpx;height: 300rpx;">
						</image>
						<u-icon name='close-circle-fill' style='position: absolute;right: 10rpx;top: 0;' @click='del(pzimage)'>
						</u-icon>
					</view>

				</view>

				<view class="cons">
					<view class="backCard flexcenter flexcolumn" @click="upload2" v-if="!pzimage2">
						<image src="@/static/imags/mypage/cardphoto.png" mode="" style="width: 30%;height: 50%;">
						</image>
						<view class="onFont">
							请上传银行卡反面
						</view>
					</view>
					<image v-else :src="pzimage2" style="width: 660rpx;height: 300rpx;" mode=""></image>
				</view>

			</view>
			<view>
				<label class="labmar container">银行卡信息</label>
				<view class="conta">
					<view class="flexbetween padd20">
						<label style="width: 22%;"> 银行卡号</label>
						<u--input placeholder="请输入银行卡号" style='width: 60%;' type='number'
							placeholderStyle='paddingLeft:20rpx' maxlength='19' v-model="backCard"
							>
						</u--input>
					</view>
					<view class="flexbetween padd10">
						<label style="width: 22%;">开户行</label>
						<text class="width80">{{openBack}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
					<view class="flexbetween padd10">
						<label style="width: 22%;">开户城市</label>
						<text class="width80">{{cityBack}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
					<view class="flexbetween padd10">
						<label style="width: 22%;">开户支行</label>
						<u--input placeholder="请输入开户支行" style='width: 60%;' type='number'
							placeholderStyle='paddingLeft:20rpx' maxlength='19' v-model="backCard"
							>
						</u--input>
					</view>
				</view>
			</view>
			<!-- <view class="" style="margin-top: 30rpx;">
				<u-button color='#3476fe'>确认修改 </u-button>    
			</view> -->
			<view style="padding: 30rpx 60rpx; width: 100%;box-sizing: border-box;">
				<view class="buttonStyle flexcenter">确认修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				power: '',
				handle: null,
				showType: false,
				typeSelect: [
					[
						'对公',
						'对私',
						'其他',
					]
				],
				typeTxt: '对公',
				pzimage: '',
				pzimage2: '',
				backCard: '621************1212',
				openBack: '邮政银行',
				cityBack: '河南省-郑州市',
				branchBack: '邮政银行裕和路支行',

			}
		},
		methods: {
			typeConfirm(e) {
				this.showType = false
				this.typeTxt = e.value[0]
			},
			typeCancel() {
				this.showType = false
			},
			upload() {
				let _this = this;
				let pzimage = _this.pzimage;
				let num = 5 - pzimage.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 6, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera'], //选择相机走
								success: function(res) {
									_this.pzimage = res.tempFilePaths[0]
								}
							})

						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 6, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									_this.pzimage = res.tempFilePaths[0]
								}
							})

						}
					}
				})
			},
			upload2() {
				let _this = this;
				let pzimage = _this.pzimage2;
				let num = 5 - pzimage.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0 
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 6, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera'], //选择相机走
								success: function(res) {
									_this.pzimage2 = res.tempFilePaths[0]
								}
							})

						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 6, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									_this.pzimage2 = res.tempFilePaths[0]
								}
							})

						}
					}
				})
			},
			del(obj) {

			}
		},
		onLoad: function(option) {
		}
	}
</script>

<style scoped lang="scss">
	.userType {
		width: 140rpx;
		height: 81rpx;
		color: #999999;
		font-size: 30rpx;
		text-indent: 1em;
		line-height: 81rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
	}

	.backCard {
		width: 99%;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.labmar {
		margin: 20rpx 0;
		display: inline-block;
	}

	.container {
		padding: 0 38rpx;
	}

	.conta {
		padding: 40rpx 40rpx;
		background-color: #fff;
	}

	.padd10 {
		padding: 20rpx;
	}
	.padd20{
		padding:0 20rpx 20rpx 20rpx;
	}

	::v-deep .u-input {
		background-color: #fff;
	}

	::v-deep .u-border {
		border-color: #fff !important;
	}

	::v-deep .uni-input-input {
		padding-left: 20rpx;
	}

	::v-deep .u-input--radius {
		border-radius: 20rpx;
	}

	.onFont {
		color: #999999;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.width80 {
		width: 60%;
	}
</style>
